<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <p>1</p>
    <p>2</p>
    <p class="target">3</p>
    <p>4</p>
    <p>5</p>
  </div>
  <script>
    const target = document.querySelector(".target")
    // 找父元素
    target.parentNode.style.border = "1px solid red";
    // 子元素
    // console.log(target.parentNode.children);
    // 伪数组转成真数组
    [...target.parentNode.children].forEach(p => {
      p.style.border = "1px solid green"
    })

    // 上一个兄弟 背景 黑色
    target.previousElementSibling.style.backgroundColor = "black"
    // 下一个兄弟 背景 蓝色
    target.nextElementSibling.style.backgroundColor = "blue"


  </script>
</body>

</html>